<template>
  <div class="commentDetail">
    <div class="videoOutBox">
      <van-icon name="arrow-left" @click="returnBefor" class="returnIcon" />
      <video
        :src="mvCdn"
        controls
        width="100%"
        class="videoStyle"
        ref="playMp4"
      ></video>
    </div>
    <!-- 作者名 作者头像 关注? -->
    <div class="authorImgName">
      <img :src="author.cover" alt="" class="authorImg" />
      <span class="artistName">{{ author.artistName }}</span>
      <span
        class="focusOn"
        :id="changeClassName"
        @click="changeClass"
        v-if="isShow"
        ><van-icon name="plus" />关注</span
      >
      <span class="focusOn focusOn2" @click="isShow = !isShow" v-else
        >已关注</span>
    </div>
    <div class="segmentation"></div>
    <van-search v-model="value" placeholder="我也来说两句..." @keydown.enter="pushInfo" />
    <div class="goodComment">精彩评论:</div>
            <lazy-component>
    <CommentList :commentList1="commentList"></CommentList>
            </lazy-component>
      <div class="allCommentBox" v-if="isSwich" @click="isSwich=!isSwich"><span class="allComment">全部评论></span></div>
    <CommentList :commentList1="allComment" v-else>
      <div class="goodComment">全部评论:</div>
    </CommentList>
  </div>
</template>
<script>
import { getMvComment } from "../../../api/vudeo.api.js";
import { getMv } from "../../../api/vudeo.api.js";
// 获取歌手头像名称
import { getRecommendMv } from "../../../api/vudeo.api.js";
import CommentList from "./CommentList"
import {mapState} from "vuex"
export default {
  name: "CommentDetail",
  data() {
    return {
      mvId: null,
      mvCdn: null,
      author: "",
      isShow: true,
      changeClassName: null,
      commentList: [],
      headImg: "",
      allComment:null,
      isSwich:true,
      value:"",
      // userName1:null,
    };
  },
  created() {
    this.mvId = this.$route.query.id;
    getMvComment(this.mvId).then((res) => {
      this.commentList = res.hotComments;
      this.allComment=res.comments
    });
    // mp4 CDN
    getMv(this.mvId).then((res) => {
      this.mvCdn = res.data.url;
    });

    // 拿到作者的的头像和名字
    getRecommendMv(50).then((res) => {
      this.author = res.data[this.$route.query.index];
    })


  },
  methods: {
    returnBefor() {
      this.$router.go(-1);
    },
    changeClass() {
      this.changeClassName = "remove";
      setTimeout(() => {
        this.isShow = false;
      }, 500);
    },
    changeClass2(){
      this.isShow = !this.isShow
      this.changeClassName = "remove2";

    }
    ,
    pushInfo(){
      if(this.value!=="")
      this.commentList.unshift({content:this.value,user:{avatarUrl:this.userInfo1.avatar,nickname:this.userInfo1.userName}}
      );
      this.value=""
    }
  },
  components: {
        CommentList
  },
  mounted () {
    this.$refs.playMp4.play() 
  },
  computed: {
     ...mapState(["userInfo1"])

    
  }
};
</script>
<style lang="less" scoped>
.videoOutBox {
  display: flex;
  padding: 0 5px;
  position: relative;
}
.videoStyle {
  border-radius: 15px;
  width: 100%;
  height: 220px;
}

.returnIcon {
  position: absolute;
  color: aliceblue;
  font-size: 25px;
  top: 30px;
  left: 15px;
  z-index: 5;
}
.segmentation {
  height: 10px;
  background: rgb(238, 236, 236);
}
.authorImgName {
  display: flex;
  padding: 5px 10px;
  align-items: center;
  position: relative;
}
.authorImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.artistName {
  font-size: 14px;
  padding-left: 8px;
}
.focusOn {
  position: absolute;
  right: 30px;
  background-color: red;
  color: white;
  padding: 3px 5px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.focusOn2 {
  transform: translateX(20px);
    transition-duration: 0.5s;
  transition-timing-function: linear;
}
#remove {
  transform: translateX(-20px);
  transition-duration: 0.5s;
  transition-timing-function: linear;
}
// #remove2{
//   transform: translateX(20px);
//    transition-duration: 0.5s;
//   transition-timing-function: linear;
// }
.allComment{
  padding: 3px 10px;
  border: 1px solid rgb(207, 203, 203);
  border-radius: 10px;
  font-size: 14px;
}
.allCommentBox{
  display: flex;
  padding: 0 10px;
  justify-content: center;
}
.allcommentList{
  display: flex;
  flex-flow: wrap;
}
.goodComment{
  // width: 100%;
  padding: 10px 0 0 10px;
}
</style>